<template>

  <ul class="ul-container" >
      <li class="list-children li-child " v-for="(item,index) in list" 
         >
        <span :class="{'active': item.anchor === current}" @click.self="selectItem(item.anchor)" >{{item.name}}</span>
          <BRightList :list="item.children" @selectId="selectItem" :current='current'  ></BRightList>
      </li>
       
  </ul>

</template>

<script>

export default {
    name:"BRightList",
    
    props:{
        list:{
            type:Array,
            default:[]
        },
        current:{
            type:String,
            default:""
        }

    },

    setup(props,cxt){
       
        const selectItem = (name)=>{
            cxt.emit("selectId",name);
        }
    



        return{
            selectItem,
          
        }
    }


}
</script>

<style lang="less" scoped>
 ul{
        padding-left: 25px;
        margin: 0;
        width: 250px;
        height: 100%;
        overflow-x: hidden; 
        li{
            min-height: 30px ;
            line-height: 30px;
            cursor: pointer;
            font-size: 19px;
            width: 100%;
            span{
                width: 100%;
                height: 100%;
                display: block;
            }
        }
    }
.active{
    font-weight: 700;
}

</style>